<template>
  <view class="uni-numbox">
    <view
      class="uni-numbox-minus"
      :class="{ 'uni-numbox-disabled': disableSubtract }"
      @click="_calcValue('subtract')"
      >-</view
    >
    <input
      class="uni-numbox-value"
      type="number"
      :disabled="disabled"
      :value="inputValue"
      @blur="_onBlur"
    />
    <view
      class="uni-numbox-plus"
      :class="{ 'uni-numbox-disabled': disableAdd }"
      @click="_calcValue('add')"
      >+</view
    >
  </view>
</template>
<script>
export default {
  name: "uni-number-box",
  props: {
    value: {
      type: Number,
      default: 0,
    },
    min: {
      type: Number,
      default: -Infinity,
    },
    max: {
      type: Number,
      default: Infinity,
    },
    step: {
      type: Number,
      default: 1,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      inputValue: this.value,
    };
  },
  computed: {
    disableSubtract() {
      return this.value <= this.min;
    },
    disableAdd() {
      return this.value >= this.max;
    },
  },
  watch: {
    value(val) {
      this.inputValue = val;
    },
    inputValue(val) {
      this.$emit("change", val);
    },
  },
  methods: {
    _calcValue(type) {
      const scale = this._getDecimalScale();
      let value = this.inputValue * scale;
      let step = this.step * scale;

      if (type === "subtract") {
        value -= step;
      } else if (type === "add") {
        value += step;
      }
      if (value < this.min || value > this.max) {
        if (value < this.min) {
          uni.showToast({
            title: "购买数量最低为1~",
            icon: "none",
          });
        }
        if (value > this.max) {
          uni.showToast({
            title: "当前购买数量大于库存~",
            icon: "none",
          });
        }
        return;
      }
      this.inputValue = value / scale;
    },
    _getDecimalScale() {
      let scale = 1;
      // 浮点型
      if (~~this.step !== this.step) {
        scale = Math.pow(10, (this.step + "").split(".")[1].length);
      }
      return scale;
    },
    _onBlur(event) {
      let value = event.detail.value;
      if (!value) {
        this.inputValue = 0;
        return;
      }
      value = +value
      if (value > this.max) {
        value = this.max;
      } else if (value < this.min) {
        value = this.min;
      }
      this.inputValue = value;
    },
  },
};
</script>
<style>
.uni-numbox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: 60rpx;
}

.uni-numbox-minus,
.uni-numbox-plus {
  margin: 0;
  background-color: #f9f9f9;
  width: 60rpx;
  height: 100%;
  line-height: 60rpx;
  text-align: center;
  color: #555555;
}

.uni-numbox-minus {
  border: 2rpx solid #cccccc;
  border-right: none;
  border-top-left-radius: 6rpx;
  border-bottom-left-radius: 6rpx;
}

.uni-numbox-plus {
  border: 2rpx solid #cccccc;
  border-left: none;
  border-top-right-radius: 6rpx;
  border-bottom-right-radius: 6rpx;
}

.uni-numbox-value {
  border: 2rpx solid #cccccc;
  background-color: #ffffff;
  width: 80rpx;
  height: 100%;
  text-align: center;
}

.uni-numbox-disabled {
  /* color: #c0c0c0;   */
}
</style>
